<template>
	<div class="page">
		<div class="logo">
			<img class="logo-img" src="../assets/userLogo-2.png" alt="" />
			<div class="right-ic" @click="changeLanguage">
				<img src="../assets/100-1.png" alt="" />
				<span>{{$i18n.locale == 'zh' ? 'EN' : '中文'}}</span>
			</div>
		</div>
		<div class="content">
			<div class="content-tab" v-if="showHotelsTab" @click="showPopup = !showPopup">
				<img class="ic" src="../assets/tab-ic.png" alt="" />
				{{$t('language.text73')}}：<span>{{hotel_name}}</span>
			</div>
			<div class="search-wrap">
				<div class="search">
					<input type="text" v-model="search" :placeholder="$t('language.search1')" />
					<img class="ic" src="../assets/101.png" alt="" />
				</div>
			</div>
			<van-list v-model="loading" :finished="finished" :finished-text="$t('language.noMore')" @load="onLoad">
				<div class="card" v-for="item in list" :key="item.id">
					<div class="user">
						<div class="user-left">
							<div class="user-name">
								{{item.name}}
								<span class="en">{{item.english_name }}</span>
								<!-- <span class="tag">{{item.position}}</span> -->
							</div>
							<!-- <div class="user-text">{{$i18n.locale == 'zh' ? item.hotel.title : item.hotel.title_en }}</div> -->
						</div>
						<div class="user-img">
							<img :src="item.avatar" alt="" />
						</div>
					</div>
					<div class="info-wrap">
						<div class="info">{{$t('language.text28')}}：<span class="num">{{item.lnr_count}}</span></div>
						<div class="info top-10">{{ $i18n.locale == "zh" ? `${computeDate(item.created_at) + $t("language.text15") }` : `${ $t("language.text15") + computeDate(item.created_at)}` }}: <span
								class="num">{{item.lnr_room_count}}</span></div>
						<div class="info" style="display: flex;align-items: center;margin-top: 24px;">
							<van-switch @click="tapSwitch(item)" v-model="item.is_enabled" active-color="#4BD865" />
							<span style="margin-left: 8px;">是否启用</span>
						</div>

						<div class="btn">
							<!-- is_login  0 未登陆过 1登陆过 -->
							<span v-if="item.is_login === 0">{{$t('language.text70')}}</span>
							<span v-if="item.is_login === 1">{{$t('language.text69')}}</span>
							<!-- <img src="../assets/111.png" alt="" /> -->
						</div>
					</div>
					<div class="tap-lnr" @click="goMySell('mySell', item)">
						<span>{{$t('language.text30')}}</span>
						<van-icon name="arrow" />
					</div>
				</div>
			</van-list>
		</div>

		<div class="add-btn">
			<div class="btn" @click="goPage('customer')">
				<img src="../assets/tab-2.png" alt="" />
				<span>{{showHotelsTab ? $t('language.text34') : $t('language.text85')}}</span>
			</div>
			<div class="btn select">
				<img src="../assets/tab-selcet-1.png" alt="" />
				<span>{{$t('language.text33')}}</span>
			</div>
			<!-- <div class="btn" @click="goPage('assign')">
				<img src="../assets/tab-3.png" alt="" />
				<span>{{$t('language.text35')}}</span>
			</div> -->
			<div class="btn" @click="goPage('check')">
				<img src="../assets/tab-4.png" alt="" />
				<span>{{$t('language.text36')}}</span>
				<div class="count" v-if="count > 0">
					<span>{{count > 9 ? 9 : count}}</span>
					<span v-if="count > 9" class="add-ic">+</span>
				</div>
			</div>
			<div class="btn" @click="goPage('forms')">
				<img src="../assets/tab-5.png" alt="" />
				<span>{{$t('language.text37')}}</span>
			</div>
		</div>

		<van-popup v-model="showPopup" position="bottom" class="popup-hotels">
			<van-picker show-toolbar :confirm-button-text="$t('language.text52')"
				:cancel-button-text="$t('language.text53')" value-key="hotel_name" :default-index="hotel_index"
				:columns="hotels" @cancel="showPopup = !showPopup" @confirm="onConfirm" />
		</van-popup>
	</div>
</template>
<script>
	import {
		getUserInfo,
		getUserLists,
		verifyCount,
		openMsg,
		enableUser,
		beUserLists
	} from '@/api/user';
	import {
		Dialog,
		Toast
	} from 'vant';
	let timer = null

	export default {
		name: 'Sell',
		data: function() {
			return {
				locale: 'zh',
				search: '',
				userinfo: '',
				list: [],
				loading: false,
				finished: false,
				showPopup: false,
				showHotelsTab: false,
				page: 1,
				count: 0,
				type: 2,
				hotels: [],
				hotel_id: '',
				hotel_name: '',
				hotel_code: '',
				hotel_index: 0,
			};
		},
		created() {
			let userinfo = JSON.parse(localStorage.getItem('userinfo'))
			if (userinfo) {
				const {
					type
				} = userinfo
				this.type = type
				this.showHotelsTab = type !== 4 ? true : false
				if (userinfo.is_open_msg == 0) {
					Dialog.alert({
						title: this.$i18n.tc('language.text18'),
						message: this.$i18n.tc('language.text19'),
						theme: 'round-button',
						confirmButtonText: this.$i18n.tc('language.text20'),
					}).then(() => {
						userinfo.is_open_msg = 1
						localStorage.setItem('userinfo', JSON.stringify(userinfo))
						this.getOpenMsg()
					});
				}
			}

			this.getVerifyCount()
		},
		mounted() {},
		watch: {
			search: function() {
				const t = this
				if (timer != null) clearTimeout(timer)

				timer = setTimeout(() => {
					timer = null
					clearTimeout(timer)
					t.page = 1
					t.list = []
					t.getUserListsData()
				}, 500)
			}
		},
		methods: {
			computeDate(str) {
				let date = new Date(str);
				date.setMonth(date.getMonth() - 1);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}`;
			},
			tapSwitch(item) {
				let isShow = 0
				if (!item.is_enabled) {
					isShow = 1
				}
				enableUser({
					is_enabled: isShow,
					enable_user_id: item.id
				}).then((res) => {
					if (res.status_code != 200) {
						Toast(res.message)
					} else {
						Toast(this.$i18n.tc('language.text66'))
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			onLoad() {
				this.getUserListsData()
			},
			getOpenMsg() {
				openMsg().then((res) => {
					console.log(res, 'openMsg')
				}).catch((err) => {
					console.log(err)
				})
			},
			onConfirm(value, index) {
				const {
					hotel_id,
					hotel_name,
					hotel_code
				} = value
				this.page = 1
				this.list = []
				value.hotel_index = index
				this.hotel_id = hotel_id
				this.hotel_name = hotel_name
				this.hotel_code = hotel_code
				this.hotel_index = index
				this.showPopup = false
				localStorage.setItem("hotels", JSON.stringify(value))
				this.getUserListsData()
			},

			async getUserListsData() {
				if (this.type !== 4) {
					if (this.hotels.length == 0) {
						const user = await getUserInfo()
						this.userinfo = user.data
						this.hotels = user.data.hotels
						let _hotels = localStorage.getItem('hotels')
						if (user.data.hotels && user.data.hotels instanceof Array && user.data.hotels.length > 0) {
							if (_hotels) {
								_hotels = JSON.parse(_hotels)
							} else {
								_hotels = user.data.hotels[0]
							}
							this.hotel_id = _hotels.hotel_id
							this.hotel_name = _hotels.hotel_name
							this.hotel_code = _hotels.hotel_code
							if (!_hotels.hotel_index) {
								_hotels.hotel_index = 0
							}
							this.hotel_index = _hotels.hotel_index
							localStorage.setItem("hotels", JSON.stringify(_hotels))
						} else {
							localStorage.removeItem("hotels")
						}
					}
					
					getUserLists({
						page: this.page,
						key: this.search
					}).then((res) => {
						let {
							current_page,
							last_page,
							data
						} = res.data
						// 加载状态结束
						this.loading = false;
						// 数据全部加载完成
						if (current_page == last_page) {
							this.finished = true;
						} else {
							this.finished = false;
							this.page++
						}
						data.forEach((item) => {
							item.is_enabled === 0 ? item.is_enabled = false : item.is_enabled = true
						})
						this.list = [...this.list, ...data]
					}).catch((err) => {
						this.loading = false;
						console.log(err)
					})
					return
				}
				beUserLists({
					page: this.page,
					key: this.search
				}).then((res) => {
					let {
						current_page,
						last_page,
						data
					} = res.data
					// 加载状态结束
					this.loading = false;
					// 数据全部加载完成
					if (current_page == last_page) {
						this.finished = true;
					} else {
						this.finished = false;
						this.page++
					}
					data.forEach((item) => {
						item.is_enabled === 0 ? item.is_enabled = false : item.is_enabled = true
					})
					this.list = [...this.list, ...data]
				}).catch((err) => {
					this.loading = false;
					console.log(err)
				})
			},
			goMySell(page, item) {
				let data = {
					id: item.id,
					name: item.name,
					english_name: item.english_name,
					avatar: item.avatar,
					position: item.position,
				}
				if(item.hotel) {
					data.title = item.hotel.title
					data.title_en = item.hotel.title_en
				}
				this.$router.push({
					path: page,
					query: data
				})
			},
			goPage(page, id) {
				this.$router.push({
					path: page,
					query: {
						id
					}
				})
			},
			getVerifyCount() {
				verifyCount().then((res) => {
					this.count = res.data
				}).catch((err) => {
					console.log(err)
				})
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					this.$cookies.set('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					this.$cookies.set('locale', 'zh')
				}
			}
		}
	};
</script>
<style type="text/css" lang="scss" scoped>
	.page {
		background-color: #f2f5f7;
	}

	.logo {
		background-color: #fff;

		.tab-app {
			display: flex;
			align-items: center;
			font-size: 24px;
			color: #333333;

			img {
				width: 31px;
				height: 30px;
				margin-right: 6px;
			}
		}

		.right-ic {
			color: #333333;
		}
	}

	.content {
		padding-bottom: 80px;

		.content-tab {
			display: flex;
			align-items: center;
			margin: 0 30px;
			padding-top: 30px;
			font-size: 30px;

			.ic {
				width: 32px;
				height: 33px;
				margin-right: 12px;
			}
		}

		.search-wrap {
			padding-top: 40px;
			padding-bottom: 16px;
			margin: 0 30px;

			.search {
				position: relative;
				z-index: 10;
				padding: 0 28px;
				height: 74px;
				border: 2px solid #1f4456;
				background-color: #fff;
				box-sizing: border-box;
				border-radius: 45px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				input {
					font-size: 24px;
					color: #666;
					width: 100%;
					height: 100%;
				}

				.ic {
					width: 28px;
					height: 28px;
					flex-shrink: 0;
				}
			}
		}

		.card {
			margin: 24px 30px 0;
			padding: 30px;
			box-sizing: border-box;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0 0 24px #eee;
			position: relative;

			.user {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				box-sizing: border-box;

				.user-left {
					color: #333333;

					.user-name {
						font-size: 36px;
						font-weight: bold;

						.tag {
							position: relative;
							top: 4px;
							color: #fff;
							margin-left: 12px;
							display: inline-block;
							max-width: 300px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							padding: 8px 12px;
							border-radius: 18px 18px 18px 0;
							font-size: 20px;
							background-color: #e8542c;
						}

						.en {
							margin-left: 10px;
						}
					}

					.user-text {
						font-size: 24px;
					}
				}

				.user-img {
					width: 120px;
					height: 120px;
					flex-shrink: 0;
					margin-left: 24px;
					border-radius: 50%;
					border: 1px solid #fff;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.title {
				font-size: 30px;
				color: #333333;
				padding-bottom: 10px;
				font-weight: bold;
			}

			.info-wrap {
				margin-top: 24px;
				position: relative;

				.info {
					font-size: 24px;
					color: #666666;

					.num {
						color: #1f4456;
					}

					&.top-10 {
						margin-top: 10px;
					}
				}

				.btn {
					position: absolute;
					top: 0;
					right: 0;
					font-size: 24px;
					color: #1f4456;
					display: flex;
					align-items: center;

					img {
						width: 24px;
						height: 24px;
						margin-left: 8px;
						position: relative;
						top: 2px;
					}
				}
			}

			.tap-lnr {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #1f4456;
				font-size: 24px;
				padding-top: 40px;
				margin-top: 24px;
				border-top: 1px solid #eee;
			}

		}
	}

	.add-btn {
		position: fixed;
		left: 50%;
		bottom: 0;
		z-index: 10000;
		transform: translateX(-50%);
		width: 100%;
		height: 114px;
		max-width: 750px !important;
		color: #fff;
		font-size: 28px;
		background-color: #fff;
		box-shadow: 0 2px 24px #eee;
		padding: 14px 30px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;

		.btn {
			color: #999999;
			font-size: 24px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			max-width: 18%;
			margin: 0 12px;
			height: 100%;
			position: relative;

			&.select {
				color: #1f4456;
			}

			.count {
				position: absolute;
				top: -10px;
				right: 0;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				line-height: 44px;
				text-align: center;
				font-size: 22px;
				color: #FFFFFF;
				background-color: #E8542C;

				.add-ic {
					font-size: 20px;
					position: relative;
					top: -8px;
				}
			}

			img {
				width: 38px;
				height: 38px;
				margin-bottom: 8px;
				object-fit: contain;
			}
		}
	}

	.van-dialog {
		width: 80%;
		padding: 80px 58px;
		box-sizing: border-box;

		.van-dialog__header {
			font-size: 36px;
			color: #333333;
			font-weight: bold;
			margin-bottom: 30px;
		}

		.van-dialog__content {
			font-size: 22px;
			color: #666666;
			margin-bottom: 34px;

			.van-dialog__message {
				line-height: 34px;
			}
		}

		.van-goods-action-button--danger {
			width: 80%;
			height: 74px;
			font-size: 24px;
			color: #fff;
			background: #1f4456 !important;
			border-radius: 10px;
		}
	}

	.van-popup.popup-hotels {
		z-index: 100000 !important;
	}
</style>